<template>
	<div>
		<header class="aui-bar aui-bar-nav aui-bar-light">
			<a href="javascript:" onclick="history.back(); " class="aui-pull-left aui-btn" >
				<span class="aui-iconfont aui-icon-left">  </span>
			</a>
			<div class="aui-title" style="color:#fff;">{{newDetail.news_title}}</div>
			<a class="aui-pull-right aui-btn ">
				<span class="aui-iconfont aui-icon-more">  </span>
			</a>
		</header>

		<div class="aui-main">
			<article class="article padding-side">
				<div>
					<h1 class="article-title">{{newDetail.news_title}}</h1>
				</div>
				<div class="article-content" v-html="newDetail.news_content"></div>
			</article>
		</div>

		<div class="aui-card-list-content">
			<div class="aui-bg-like" @click="newLike()" :class="Like==0?'aui-btn-banger':'aui-btn-info'"><i class="aui-iconfont aui-icon-like"></i>{{Like==0?newDetail.news_likes:newDetail.news_likes+1}} 人喜欢</div>
			<div class="aui-share-icon clearfix">
				<div class="aui-share-line b-line clearfix">
					<h2>分享到</h2>
				</div>
				<ul class="clearfix" style="padding-top:15px; padding-bottom:10px;">
					<li><i class="aui-iconfont aui-icon-wechat"></i></li>
					<li><i class="aui-iconfont aui-icon-wechat-circle"></i></li>
					<li><i class="aui-iconfont aui-icon-weibo" style="color:#ff6178"></i></li>
				</ul>
			</div>

			<!-- <div class="aui-card-list">
				<div class="aui-card-list-header" style="padding-bottom:0">
					<h3>帕托撩迪丽热巴!自认长相完爆鹿晗!要修成</h3>
				</div>
				<div class="aui-card-list-content-padded" style="padding-top:0">
					<div class="aui-row aui-row-padded">
						<div class="aui-col-xs-4">
							<img src="/static/themes/img/ad/a2.jpg" />
						</div>
						<div class="aui-col-xs-4">
							<img src="/static/themes/img/ad/a2.jpg" />
						</div>
						<div class="aui-col-xs-4">
							<img src="/static/themes/img/ad/a2.jpg" />
						</div>
					</div>
				</div>
			</div> -->

			<ul class="aui-list aui-media-list">
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou1.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是土财主</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>72</div>
							</div>
							<div class="aui-list-item-text">
								小鹿同学你这么干，你让迪丽热巴咋整
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou6.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">鹿晗的圈子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>723</div>
							</div>
							<div class="aui-list-item-text">
								是吵着玩那
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou5.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">小热巴</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>34</div>
							</div>
							<div class="aui-list-item-text">
								心疼俺家小迪丽热巴
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou4.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是滴里搭拉</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>13</div>
							</div>
							<div class="aui-list-item-text">
								顶一下
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou3.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">请别扯犊子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>73</div>
							</div>
							<div class="aui-list-item-text">
								大家好，给你介绍一下 你妹
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou2.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">上新往事</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>33</div>
							</div>
							<div class="aui-list-item-text">
								贵圈太乱了 伤不起
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou1.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是土财主</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>72</div>
							</div>
							<div class="aui-list-item-text">
								小鹿同学你这么干，你让迪丽热巴咋整
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou6.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">鹿晗的圈子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>723</div>
							</div>
							<div class="aui-list-item-text">
								是吵着玩那
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou5.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">小热巴</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>34</div>
							</div>
							<div class="aui-list-item-text">
								心疼俺家小迪丽热巴
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou4.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是滴里搭拉</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>13</div>
							</div>
							<div class="aui-list-item-text">
								顶一下
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou3.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">请别扯犊子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>73</div>
							</div>
							<div class="aui-list-item-text">
								大家好，给你介绍一下 你妹
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou2.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">上新往事</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>33</div>
							</div>
							<div class="aui-list-item-text">
								贵圈太乱了 伤不起
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou1.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是土财主</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>72</div>
							</div>
							<div class="aui-list-item-text">
								小鹿同学你这么干，你让迪丽热巴咋整
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou6.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">鹿晗的圈子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>723</div>
							</div>
							<div class="aui-list-item-text">
								是吵着玩那
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou5.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">小热巴</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>34</div>
							</div>
							<div class="aui-list-item-text">
								心疼俺家小迪丽热巴
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou4.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">我是滴里搭拉</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>13</div>
							</div>
							<div class="aui-list-item-text">
								顶一下
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou3.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">请别扯犊子</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>73</div>
							</div>
							<div class="aui-list-item-text">
								大家好，给你介绍一下 你妹
							</div>
						</div>
					</div>
				</li>
				<li class="aui-list-item aui-list-item-middle">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media">
							<img src="/static/themes/img/ad/tou2.jpg" class="aui-img-round aui-list-img-sm">
						</div>
						<div class="aui-list-item-inner ">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">上新往事</div>
								<div class="aui-list-item-right"><i class="aui-iconfont aui-icon-laud"></i>33</div>
							</div>
							<div class="aui-list-item-text">
								贵圈太乱了 伤不起
							</div>
						</div>
					</div>
				</li>

			</ul>
		</div>
		<div class="aui-card-list-footer aui-text-center aui-list-item-arrow">
			查看更多跟帖
		</div>
	</div>
</template>

<script>
	export default {
		name:'news_page',
		components:{},	// 再加 子组件
		// 方法
		created(){	//组件已创建 属性已绑定 DOM文档内容还未生成时所触发
			// 很早就会触发的（提前获取到数据）
			this.$store.dispatch('acNewDetail',this.$route.params.id);

			// 统计阅读量
			this.$store.dispatch('acRead',this.$route.params.id);
		},
		mounted(){	// 在DOM文档渲染结束后执行的，也就是再这里去植入插件代码
			
		},
		// 计算属性
		computed:{	// 更改数据的值（变量的值）
			// 这里是通过函数的形式，给变量newCate赋值，函数里面就要写return
			newDetail(){
				return this.$store.state.news.newDetail;
			},
			Like(){
				return this.$store.state.news.like
			}
		},
		methods:{
			// 写事件函数
				newLike(){
					let like = !this.$store.state.news.like
					this.$store.commit('muLike',like)
					this.$store.dispatch('actLike',this.$route.params.id)		
					// console.log(this.$store.state.home.like);	
			},
		},
		// 这里可以监听变量是否改变
		watch:{
			
		},
		// 数据筛选，比如转换时间格式
		filters:{
			formatDate: function (value) {
				let date = new Date(value*1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			}
		}
	}
</script>

<style>
	
</style>